import React, { useEffect, useState } from 'react';
import { Button, Col, Form, Input, Row, Table, Space } from 'dw-mx';
import { SearchOutlined } from 'dw-mx-icons';
import ExpertsEdit from './ExpertsEidt';
import Lov from './Lov';
import { SelectCell, StringCell, DateCell } from 'dw-mx-table';
import { Code } from 'dw-mx-extend';
import { request } from 'dw-mx-request';
import moment from 'moment';

const { Column } = Table;
const { Search } = Input;

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};

export default function ExpertsDefend() {
    const [pageParam, updatePageParam] = useState({ pageIndex: 1, pageSize: 10, rowCount: 0 });
    const [receiveInstanceData, setReceiveInstanceData] = useState([]);
    const [lovInfo,setLovInfo] = useState([])

    const [edit, updateEdit] = useState({
        open: false,
        props: {},
    });
    const [lov, updateLov] = useState({
        open: false,
        props: {},
    });
    const paginationProps = {};
    const [form] = Form.useForm();

    useEffect(() => {
        queryKsLovInfo();
    }, []);

    const queryKsLovInfo = async () => {
        const ret = await request('/mock/xcjdwh/queryKsInfo');
        if(ret.ksinfo.length === 1){
            form.setFieldsValue({
                ksbh: ret.ksinfo[0].ksbh,
                ksmc: ret.ksinfo[0].ksmc,
            });
        }
        setLovInfo(ret.ksinfo)
    };

    const onReset = () => {
        form.resetFields();
        setReceiveInstanceData([]);
    };

    const queryExpertsInfo = async () => {
        try {
            const values = await form.validateFields();
        } catch (errorInfo) {
            alert(errorInfo);
        }
        const ret = await request('/mock/xcjdwh/queryExportInfo');
        for (let i = 0; i < ret.ksinfo.length; i++) {
            ret.ksinfo[i].dateSign = moment(ret.ksinfo[i].dateSign, 'YYYY-MM-DD HH:mm:ss');
        }
        updatePageParam({ pageIndex: pageParam.pageIndex, pageSize: pageParam.pageSize, rowCount: ret.rowCount });
        setReceiveInstanceData(ret.ksinfo);
    };

    const openEdit = async (record) => {
        updateEdit({
            open: true,
            props: record,
        });
    };

    const dataTrans = (ret, experts_id) => {
        const newdata = receiveInstanceData;
        const result = newdata.map((value, index) => {
            if (index + 1 == experts_id) {
                return { ...ret, experts_id: experts_id };
            } else {
                return value;
            }
        });
        setReceiveInstanceData(result);
    };

    const closeEdit = async (ret) => {
        await dataTrans(ret, edit.props.experts_id);
        updateEdit({
            open: false,
            props: {},
        });
    };

    const openLov = async () => {
        if(lovInfo.length === 1){
            alert('仅一条数据可选');
        }else if (lovInfo.length === 0){
            alert('无可选数据');
        }else{
            updateLov({
                open: true,
                props: { lovInfo: lovInfo }
            });
        }

    };

    const closeLov = async (ret) => {
        updateLov({
            open: false,
            props: {},
        });
        form.setFieldsValue({
            ksbh: ret.ksbh,
            ksmc: ret.ksmc,
        });
    };

    return (
        <div>
            <Form form={form} {...layout} layout={'horizontal'}>
                <Row>
                    <Col span={6}>
                        <Form.Item name="zjmc" label="专家名字">
                            <Input placeholder={'请输入专家名字'} />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item name="ksbh" label="科室编号">
                            <Search onSearch={() => openLov()} />
                        </Form.Item>
                    </Col>

                    <Col span={6}>
                        <Form.Item name="ksmc" label="科室名称">
                            <Input readOnly={true} />
                        </Form.Item>
                    </Col>

                    <Col span={5}>
                        <Row justify={'end'}>
                            <Space>
                                <Button type="primary" onClick={queryExpertsInfo} icon={<SearchOutlined />}>
                                    查询
                                </Button>
                                <Button onClick={onReset}>清空</Button>
                            </Space>
                        </Row>
                    </Col>
                </Row>
            </Form>

            {lov.open && <Lov {...lov.props} closeLov={closeLov}></Lov>}

            <Table scroll={{ x: '100%' }} dataSource={receiveInstanceData} pagination={paginationProps} bordered rowKey={'experts_id'}>
                <Column
                    ellipsis={true}
                    title="序号"
                    dataIndex="experts_id"
                    key="experts_id"
                    width={'45px'}
                    align={'center'}
                    render={(value, record, index) => {
                        return <StringCell value={value} />;
                    }}
                />
                <Column
                    ellipsis={true}
                    title="姓名"
                    dataIndex="experts_name"
                    key="experts_name"
                    width={'120px'}
                    align={'center'}
                    render={(value, record, index) => {
                        return <StringCell value={value} />;
                    }}
                />
                <Column
                    ellipsis={true}
                    title="性别"
                    dataIndex="experts_sex"
                    key="experts_sex"
                    width={'45px'}
                    align={'center'}
                    render={(value, record, index) => {
                        return <SelectCell value={value} align={'left'} options={Code.NAMEDCODE.get('XB')} />;
                    }}
                />
                <Column
                    ellipsis={true}
                    title="联系方式"
                    dataIndex="phone"
                    key="phone"
                    width={'150px'}
                    align={'center'}
                    render={(value, record, index) => {
                        return <StringCell value={value} />;
                    }}
                />
                <Column
                    ellipsis={true}
                    title="所属科室"
                    dataIndex="office"
                    key="office"
                    width={'120px'}
                    align={'center'}
                    render={(value, record, index) => {
                        return (
                            <SelectCell
                                value={value}
                                options={Code.JSONCODE([
                                    { value: '1', content: '内科' },
                                    { value: '2', content: '外科' },
                                    { value: '3', content: '儿科' },
                                ])}
                            />
                        );
                    }}
                />
                <Column
                    ellipsis={true}
                    title="外出时间"
                    dataIndex="dateSign"
                    key="dateSign"
                    width={'120px'}
                    align={'center'}
                    render={(value, record, index) => {
                        return <DateCell value={value} mask={'YYYY-MM-DD HH:mm:ss'} />;
                    }}
                />
                <Column
                    ellipsis={true}
                    title="操作"
                    dataIndex="operation"
                    key="operation"
                    width={'120px'}
                    align={'center'}
                    render={(text, record: any, index) => {
                        return (
                            <Space>
                                <a onClick={() => openEdit(record)}>修改</a>
                            </Space>
                        );
                    }}
                />
            </Table>
            {edit.open && <ExpertsEdit content={edit.props} closeEdit={closeEdit}></ExpertsEdit>}
        </div>
    );
}
